import React, {useRef} from 'react';
import {
  StyleSheet,
  View,
  Button,
  Animated,
  TouchableOpacity,
  Text,
} from 'react-native';

const 平移_旋转_缩放_渐变9_2 = () => {
  // const marginLeft = useRef(new Animated.Value(0)).current;
  const rotate = useRef(new Animated.Value(0)).current;
  // const scale = useRef(new Animated.Value(1)).current;
  const opacity = useRef(new Animated.Value(0)).current;
  const colorAnimation = useRef(new Animated.Value(0)).current;

  //在更新特性之前对值进行插值，例如将0-1映射到0-10。rotate需要映射
  const rotateValue = rotate.interpolate({
    inputRange: [0, 45],
    outputRange: ['0deg', '45deg'],
  });

  // 颜色映射
  const backgroundColor = colorAnimation.interpolate({
    inputRange: [0, 0.5, 1],
    outputRange: ['#cccccc80', 'red', 'rgba(0, 0, 255, 0.4)'],
  });
  return (
    <View style={styles.root}>
      <TouchableOpacity
        style={{
          backgroundColor: 'red',
          width: 50,
          height: 26,
          justifyContent: 'center',
          flexDirection: 'row',
          alignItems: 'center',
        }}
        onPress={() => {
          colorAnimation.setValue(0);
          rotate.setValue(0);
          opacity.setValue(0);
        }}>
        <Text>reset</Text>
      </TouchableOpacity>
      <Button
        title="按钮"
        onPress={() => {
          Animated.timing(rotate, {
            toValue: 45,
            duration: 1000,
            useNativeDriver: false,
          }).start();

          Animated.timing(opacity, {
            toValue: 1,
            duration: 1000,
            useNativeDriver: false,
          }).start();



          const change1 = Animated.timing(colorAnimation, {
            toValue: 0.5,
            duration: 2000,
            useNativeDriver: false,
          });
          const change2 = Animated.timing(colorAnimation, {
            toValue: 1,
            duration: 2000,
            useNativeDriver: false,
          });
          Animated.sequence([change1, change2]).start();
        }}
      />

      <Animated.View
        style={[
          styles.view,
          // {marginLeft: marginLeft}
          {
            transform: [
              {rotate: rotateValue},
              // { scale: scale }
            ],
          },
          {opacity: opacity},
        ]}
      />

      <Animated.View
        style={[
          {
            position: 'absolute',
            right: 20,
            top: 80,
            width: 100,
            height: 100,
            zIndex: 2,
          },
          {
            transform: [
              {rotate: rotateValue},
              // { scale: scale }
            ],
          },
          {backgroundColor: backgroundColor},
        ]}
      />
    </View>
  );
};

export default 平移_旋转_缩放_渐变9_2;

const styles = StyleSheet.create({
  root: {
    width: '100%',
    backgroundColor: 'white',
  },
  view: {
    width: 100,
    height: 100,
    backgroundColor: '#3050ff',
    marginTop: 60,
    marginLeft: 60,
  },
});
